<template>
    <div class='dialog'>
        <div class='newAdd dialog-con brandInfomation'>
          <split-vertical title="新增品牌信息"></split-vertical>
            <div class="brandinfo">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" :label-position="labelPosition">
                    <el-form-item label="授权品牌" prop="brandId">
                        <el-select v-model="ruleForm.brandId" placeholder="请选择"  filterable allow-create>
                            <el-option
                            v-for="item in brandList"
                            :key="item.id"
                            :label="item.bname"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="品牌编码" prop="brandCode">
                        <el-input v-model="ruleForm.brandCode"></el-input>
                    </el-form-item> -->
                    <el-form-item label="授权级别" prop="accreditLevel" >
                        <el-select v-model="ruleForm.accreditLevel" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授权起止时间" prop="accreditStartTime">
                        <el-date-picker 
                            v-model="ruleForm.accreditStartTime"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="授权结束时间" prop="accreditEndTime">
                        <el-date-picker 
                            v-model="ruleForm.accreditEndTime"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="合作公司" prop="companyId" >
                        <el-select v-model="ruleForm.companyId" placeholder="请选择"  filterable allow-create>
                            <el-option
                            v-for="(item,index) in cooperationCompany"
                            :key="index"
                            :label="item.companyName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="渠道名称" prop="channelId" >
                        <el-select v-model="ruleForm.channelId" placeholder="请选择"  filterable allow-create>
                            <el-option
                            v-for="(item,index) in channelInfo"
                            :key="index"
                            :label="item.channelName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button @click="submitForm('ruleForm')" type="primary" :disabled="isBrandBtn" size="medium">创建</el-button>
                        <el-button @click="cancel" size="medium">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import SplitVertical from "components/common/SplitVertical"
import {localStorage} from "js/localStorage"
export default {
    inject: ["reload"],
    components:{
        SplitVertical
    },
    data(){
        return{
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },   
            name:'', 
            options: [{
                value: '1',
                label: '一级授权'
            },
            {
                value: '2',
                label: '二级授权' 
            }],
            labelPosition:'left',
            //合作方式假数据
            cooperationMethods:[{
                value: '1',
                label: '直采直销'
            },{  
                value: '2',
                label: '一件代发'
            }],
            brandList:[],
            channelInfo:[],
            userId:'',
            list:[],
            cooperationCompany:[],
            company:[],
            ruleForm: {
                // brandCode:'',
                brandId:'',
                accreditLevel:'',
                accreditStartTime:'',
                accreditEndTime:'',
                companyId:'',
                channelId:'',
            },
            rules: {
                // brandCode: [
                //     { required: true, message: '请输入品牌编码', trigger: 'blur' },
                //     { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
                // ],
                brandId: [
                    { required: true, message: '请选择品牌名称', trigger: 'change' }
                ],
                accreditLevel: [
                    { required: true, message: '请选择授权级别', trigger: 'change' }
                ],
                accreditStartTime: [
                    { required: true, message: '请选择授权起止时间', trigger: 'change' }
                ],
                accreditEndTime: [
                    { required: true, message: '请选择授权结束时间', trigger: 'change' }
                ],
                companyId: [
                    { required: true, message: '请选择合作公司', trigger: 'change' }
                ],
                channelId: [
                    { required: true, message: '请选择渠道名称', trigger: 'change' }
                ],
            },
            //创建按钮是否disabled
            isBrandBtn:false
        }
    },
    created(){
        this.init()
        this.userId =  localStorage.get('userID')
    },
    // computed:{
    //     ...mapGetters([
    //         G_Public,
    //         ])
    // },
    methods:{
        //选择全部的公司名称，显示对应的companyCode
        init(){
            //品牌下拉框
            this.selectBrand()
            //获取渠道名称
            this.getchannelInfomation()
            this.getCompany()
        },
        getCompany(){
            let parmas={
                pageIndex:1,
                pageSize:10,
            }
            let success=data=>{
                if(data.code=='OK')
                    this.cooperationCompany= data.data
                else
                    this.$message.error(data.msg)
                 
            }
            this.api.addCompanyList(parmas,success)
        },
         //获的品牌信息
        selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                    this.brandList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getBrandDetail({},success)
        },
        //获取渠道名称
        getchannelInfomation(){
            let parmas={
                pageIndex:1,
                pageSize:10
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.channelInfo=data.data
                } else{
                    this.$message.error(data.msg)
                }  
            }
            this.api.channelList(parmas,success)
        },
        //设置时间
        changeTime(date){
            if(date<this.accreditStartTime)
            this.$message.error('结束日期不能小于开始日期') 
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        //点击确定按钮，掉接口
        confirm(){
            let parmas=this.ruleForm;
            parmas['userId'] =this.userId
            this.isBrandBtn=true
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success('添加成功')
                    this.isBrandBtn=false
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.$message.error(data.msg)
                    this.isBrandBtn=false
                }
            }
            this.api.brandListAdd(parmas,success)
        },
        cancel(){
            this.$emit('closeDialog')
        }
    }
}
</script>
<style scoped>
.brandInfomation .el-date-editor.el-input, .el-date-editor.el-input__inner{
 width:300px;
}
.brandInfomation .el-input{
    width:300px;
}
.brandInfomation .el-select{
    width:300px;
}
</style>

<style lang="scss" scoped>
.brandInfomation{
    width:550px;
    height:500px;
    .companynews{
        h2{
            height:60px;
            line-height: 60px;
            text-indent: 20px;
            font-size: 20px;
            width:100%;
        }
    }
    .brandinfo{
        margin-left:20px;
    }
    .btn{
        margin-left:40px;
        .el-button{
            margin:0 20px;
        }
    }
}
</style>




